<template>
    <div class="page-container">
        <div class="page-row">
            <el-form :inline="true" :model="queryParam" size="small">
                <el-form-item label-width="商品名称" prop="spuName" style="margin-right: 15px;">
                    <el-input style="height: 26px" v-model="queryParam.spuName" placeholder="请输入商品名称" :suffix-icon="Search" @keydown.enter.prevent="search"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" size="small" @click="search">查询</el-button>
        </div>
        <el-table :data="list" style="width: 100%" >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="spuImg" label="商品图片">
                <template #default="scope">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.spuImg" :zoom-rate="1.2" :z-index="9999" :preview-teleported="true"
                        :preview-src-list="srcList" :initial-index="1" fit="fill" @click="showImg(scope.row.spuImg)"/>
                </template>
            </el-table-column>
            <el-table-column prop="star" label="星级" >
                <template #default="scope">
                    <el-rate v-model="scope.row.star" size="large" disabled/>
                </template>
            </el-table-column>    
            <el-table-column prop="spuName" label="商品名称" />        
            <el-table-column prop="memberNickName" align="center" label="评论人" >
                <template #default="scope">
                    <el-avatar :src="scope.row.memberIcon" class="tooltip" />
                    <div>{{ scope.row.memberNickName }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="commentUserName" align="center" label="被回复人" >
                <template #default="scope">
                    <el-avatar :src="scope.row.commentUserHead" class="tooltip" />
                    <div>{{ scope.row.commentUserName }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="content" align="center" label="评论" >
                <template #default="scope">
                    <el-popover placement="top-start" :width="400" trigger="hover" :content="scope.row.content">
                    </el-popover>
                    <div class="content-text">{{ scope.row.content }}</div>

                </template>
            </el-table-column>
            <el-table-column prop="resources" align="center" label="图片" >
                <template #default="scope">
                    <el-image  v-for="item in imgSplitList(scope.row.resources)" style="width: 100px; height: 100px" :src="item" :fit="fit" >
                        <template #error>
                            <div class="image-slot">
                                <el-icon><icon-picture /></el-icon>
                            </div>
                        </template>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="commentType" label="类型" >
                <template #default="scope">
                    <el-tag class="ml-2" :type="scope.row.commentType == 0?'success':''">{{ scope.row.commentType == 0?'商品评论':'评论回复' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="评论时间" />

        </el-table>
        <div class="page-block">
            <el-pagination v-model:currentPage="queryParam.current" v-model:page-size="queryParam.size"
                :page-sizes="[10, 20, 30, 40]" :small="true" :disabled="false" :background="false"
                layout="total, sizes, prev, pager, next, jumper" :total="total" :hide-on-single-page="false"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, toRefs, onMounted, ref } from 'vue'
import api from '/@/api/commonApi'

export default {
    name: "spoor",
    setup() {
        const state = reactive({
            srcList: [], // 显示
            list: [], // 列表数据
            total: 0, // 总条数
            queryParam: {
                current: 1, // 当前页
                size: 10,   // 页大小
                spuName: '', // 用户昵称
            },
        })
        onMounted(() => {
            getList()
        })
        // 获取列表数据
        const getList = () => {
            api.getCommentList(state.queryParam).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        // 查询
        const search = () => {
            getList()
        }
        // 条数修改
        const handleSizeChange = e => {
            state.queryParam.size = e
            getList()
        }
        // 页码修改
        const handleCurrentChange = e => {
            state.queryParam.current = e
            getList()
        }
        const showImg = val => {
            state.srcList = [val]
        }
        const imgSplitList = val => {
            if(val) {
                return val.split(",")
            }else {
                return []
            }
        }
        return {
            getList,
            search,
            showImg,
            imgSplitList,
            handleSizeChange,
            handleCurrentChange,
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss">
.page-row{
    display: flex;
    flex-direction: row;
    align-content: center;
}

.tooltip {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;   //这里控制超出多少行开始用省略号代替
    -webkit-box-orient: vertical;
    margin: 0 auto;
}

.content-text{
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>